<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link href="css/css.css" type="text/css" rel="stylesheet">
    <link href="css/page2.css" type="text/css" rel="stylesheet">
    <script src="js/vue.global.js"></script>
    <script src="js/rem.js"></script>
    <link href="css/pdfh5.css" type="text/css" rel="stylesheet" />
    <script src="js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/pdf.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/pdfh5.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/pdf.worker.js" type="text/javascript" charset="utf-8"></script>
    <title>Title</title>
</head>
<body>
<div id="app" class="main-content">
    <div class="title">
        <img src="images/page2/title.png">
    </div>
    <div class="table-container">
        <div class="table">
            <div class="rectangle r1">
                <img class="floor-img" src="images/page2/bg1.png">
            </div>
            <div class="rectangle r2">
                <img class="floor-img" src="images/page2/bg2.png">
            </div>
            <div class="rectangle r3">
                <img class="floor-img" src="images/page2/bg3.png">
            </div>
        </div>
<!--        <div class="button-group">-->
<!--            <div class="button" style="width: 8.805rem;" @click="onOpenPopup">-->
<!--                <img class="floor-img" src="images/page2/button.png">-->
<!--            </div>-->
<!--        </div>-->
        <div class="desc" style="margin-top: 1.4rem;">
            <img src="images/page2/desc.png"></div>
    </div>
    <div class="docker">
        <div class="docker__button-group">
            <a class="button" id="button-home">
                <img src="images/docker-btn-catalogue.png">
            </a>
            <div class="button" @click="refPopup.show=true;refPopup.content=1">
                <img src="images/docker-btn-ref.png">
            </div>
            <div id="button-guide" class="button" @click="refPopup.show=true;refPopup.content=2">
                <img src="images/docker-btn-pi.png">
            </div>
        </div>
        <div style="flex: 0.5;"></div>
        <a class="logo" >
            <img src="images/logo2.png">
        </a>
    </div>
    <div class="popup center ref" :class="{ show: refPopup.show }">
        <div class="popup_mask" @click="refPopup.show=false"></div>
        <div class="popup_container">
            <div class="ref-frame">
                <div class="ref-head">
                    <div v-if="refPopup.content==1" class="ref-head__title">
                        <img src="images/ref-view-title.png">
                    </div>
                    <div v-if="refPopup.content==2" style="width: 8.785rem;" class="ref-head__title">
                        <img src="images/pi-title.png">
                    </div>
                    <div class="ref-head__close" @click="refPopup.show=false">
                        <img src="images/ref-view-close.png">
                    </div>
                </div>
                <div class="ref-content">
                    <div class="block-view" :style="{ width: refPopup.content==1?'17.27rem':'unset' }">
                        <img v-if="refPopup.content==1" src="images/page2/ref.png">
                        <img v-if="refPopup.content==2" src="images/pi-img.png">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="popup center content-popup" :class="{ show: contentPopup.show }">
        <div class="popup_mask" @click="onClosePopup"></div>
        <div class="popup_container">
            <div class="popup_container__close" @click="onClosePopup">
                <img src="images/ref-view-close.png">
            </div>
            <div class="popup_container__title">
                <img src="images/page2/popup-title.png">
            </div>
            <div class="popup_container__table table">
                <img src="images/page2/popup-table-bg.png">
                <div class="popup_container__table-frame column-view">
                    <div v-for="(column, index) in contentPopup.columns" class="column" :style="{ height: column+'%', opacity: column>1.7?1:0 }">
                        <div class="tip">
                            <img :src="'images/page2/tip'+(index+1)+'.png'">
                        </div>
                    </div>
                </div>
            </div>
            <div class="popup_container__subtitle">
                <img src="images/page2/popup-subtitle.png">
            </div>
        </div>
    </div>
    <div class="popup center pdf" :class="{ show: pdfPopup.show }">
        <div class="popup_mask" @click="pdfPopup.show=false"></div>
        <div class="ref-head__close" @click="pdfPopup.show=false">
            <img src="images/ref-view-close.png">
        </div>
        <div class="popup_container" style="width: 100% !important;">
            <div class="ref-frame">
                <div id="pdf"></div>
            </div>
        </div>
    </div>
</div>
<div class="txt">
    <img src="images/txt.png">
</div>
<script>
    const { createApp } = Vue;
    const App = createApp({
        data() {
            return {
                columns: [
                    25.7/30*100,
                    17.4/30*100,
                    15.8/30*100,
                    14.2/30*100,
                    10.7/30*100
                ],
                pdfPopup: {
                    show: false,
                    pdfh5: null
                },
                refPopup: {
                    show: false,
                    content: 1
                },
                contentPopup: {
                    show: false,
                    columns: [
                        1.7,
                        1.7,
                        1.7,
                        1.7,
                        1.7,
                    ],
                }
            }
        },
        mounted() {},
        watch: {},
        methods: {
            onOpenPopup() {
                this.contentPopup.show = true;

                let i=0;
                let interval = setInterval(() => {
                    this.contentPopup.columns[i] = this.columns[i];
                    i++;

                    if (i>=this.columns.length) {
                        clearInterval(interval);
                    }
                }, 600)
            },
            onClosePopup() {
                this.contentPopup.show = false;
                this.contentPopup.columns = [
                    1.7,
                    1.7,
                    1.7,
                    1.7,
                    1.7,
                ]
            },
            onOpenRPView() {
                if(this.pdfPopup.pdfh5==null) {
                    this.pdfPopup.pdfh5 = new Pdfh5('#pdf', {
                        pdfurl: "pi.pdf",
                        limit: 0
                    });
                } else {
                    this.pdfPopup.pdfh5.reset();
                }

                this.pdfPopup.show = true;
            }
        }
    }).mount('#app')
</script>
</body>
</html>
